<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>51包装</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="Untitled-1.less">
</head>
<style>
* {
    margin: 0;
    padding: 0;
}
    .header {
        width: 100%;
        color: white;
        background-color: #1d7ad9;
        height: 2.5rem;
        line-height: 2.5rem;
        
    }
    .header0 {
        max-width: 1300px;
        padding: 0 50px;
        margin: 0px auto;
    }
    .header1 {
        float: left;
    }
    .header2 {
        float: right;
    }
    .header2 button {
        border: none;
        height: 2.5rem;
        width: 5rem;
        background-color: #1d7ad9;
    }
    .navigation {
        width: 100%;
        height: 7.5rem;
        background-color: #f9f9f9;
    }
    .navigation0 {
        max-width: 1300px;
        padding: 0 50px;
        margin: 0px auto;
    }
    .navigation0 ul {
        float: right;
    }
    .navigation0 li {
        margin: 2rem 0 2rem 5rem;
        background-color: white;
        border-radius: 5px;
        box-shadow: 1px 1px 1px #e6e6e6;
    }
    .navigation0 a {
        color: black;
    }
    .dropdown {
        display: none;
        float: right;
        margin: 28px;
    }
    .step {
        max-width: 1300px;
        height: 120px;
        padding: 0 50px;
        margin: 0px auto;
    }
    .step0 {
        clear: both;
        width: 600px;
        display: flex;
        float: right;
        margin-right: 35px;
    }
    .step00 {
        width: 159px;
    }
    .step00 span {
        display: inline-block;
        width: 159px;
        height: 24px;
        background-image: url(img/sprites.png);
        text-align: center;
        color: white;
        line-height: 24px;
        margin: 2rem 0;
    }
    .step00 p {
        margin-left: 40px;
    }
    .step01 {
        background-position: 0 0;
    }
    .step02 {
        background-position: 0 -24px;
    }
    .step1 {
        display: none;
        float: right;
        margin-top: 20px;
    }
    .main {
        clear: both;
        max-width: 1300px;
        padding: 0 50px;
        margin: 0px auto;
    }
    .main1 {
        font-size: 20px;
        vertical-align: middle;
        margin: 10px 0px;
    }
    .main001 {
        display: inline-block;
        width: 6px;
        height: 23px;
        background-image: url(img/sprites.png);
        background-position: -77px -50px;
        vertical-align: middle;
    }
    .main2 {
        width: 100%;
        height: 45px;
        line-height: 45px;
        border-radius: 5px ;
        padding-left: 16px;
        color: #1d7ad9;
        background-color: #f4f4f4;
        font-size: 18px;
        vertical-align: middle;
    }
    .main002 {
        display: inline-block;
        width: 23px;
        height: 23px;
        background-image: url(img/sprites.png);
        background-position: 0px -53px;
        vertical-align: middle;
    }
    .main3 {
        width: 100%;
        padding: 32px 16px 32px 50px;
        background-color: #fbfcff;
    }
    .main3 label {
        padding-left: 0;
        padding-right: 48px;
        margin-top: 0px;
        font-size: 18px;
    }
    .main3 div {
        margin-top: -8px;
    }
    .main003 {
        display: inline-block;
        width: 24px;
        height: 28px;
        background-image: url(img/sprites.png);
        background-position: -135px -50px;
        vertical-align: middle;
    }
    .main004 {
        display: inline-block;
        width: 23px;
        height: 23px;
        background-image: url(img/sprites.png);
        background-position: -23px -53px;
        vertical-align: middle;
    }
    .main4 {
        width: 100%;
        padding: 20px 16px 20px 50px;
        background-color: #fbfcff;
    }
    .main4 form {
        padding: 8px 0px;
    }
    .main4 label {
        padding-left: 0;
        font-size: 18px;
    }
    .main4btn {
        float: right;
        padding-top: 28px;
    }
    .main005 {
        display: inline-block;
        width: 23px;
        height: 23px;
        background-image: url(img/sprites.png);
        background-position: -46px -53px;
        vertical-align: middle;
    }
    .main5 {
        width: 100%;
        background-color: white;
        border: 1px solid #e8e8e8;
        margin-bottom: 50px;
    }
    .main5 button {
        display: block;
        width: 180px;
        height: 50px;
        font-size: 24px;
        margin: 140px auto;
        color: white;
        background-color: #e15053;
        border: none;
        border-radius: 10px;
    }
    
    .contactus {
        width: 100%;
        height: 200px;
        background-color: #f9f9f9;
      
    }
    .contactus0 {
        max-width: 1300px;
        padding: 50px 50px;
        margin: 0px auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .contactus2 {
        width: 230px;
    }
    .contactus a {
        padding: 8px;
        color: #999999;
    }
    .contactus3 {
        width: 250px;
        color: #999999;
    }
    .contactus3 img{
        float: right;
    }
    .footer {
        height: 34px;
        line-height: 34px;
        text-align: center;
        color: white;
        background-color: #1d7ad9;
    }
    .main9 {
        width: 100%;
        padding: 32px 16px 32px 50px;
        background-color: #fbfcff;
    }
    .main9 label {
        padding-left: 0;
        padding-right: 48px;
        margin-top: 0px;
        font-size: 18px;
    }
    .main9btn {
        float: right;
    }
    .mediaform {
        display: none;
    }
    /* 自定义radio样式 */
    .test-radio {
        display:none
    }
    .test-radioInput {
        background-color:#eee;
        border: 1px solid #999999;
        border-radius:100%;
        display:inline-block;
        height:13px;
        margin-right:10px;
        vertical-align:middle;
        width:13px;
    }
    .test-radio:checked+ .test-radioInput:after {
        background-color: #1d7ad9;
        border-radius:100%;
        content:"";
        display:inline-block;
        height:9px;
        margin:0 0 8px 1px;
        width:9px
    }
 
    @media all and (max-width: 425px) {
        .header0, .step {
            padding: 0 20px;
        }
        .navigation0, .step0, .radio-inline, .form-group {
            display: none;
        }
        .dropdown, .step1 {
            display: inline;
        }
        .radio, .mediaform {
            display: block;
        }
        .main3 {
            padding: 16px 0 16px 42px;
        }
        .main3 div {
            padding-top: 32px;
        }
        .main4 {
            padding: 16px 0 16px 42px;
        }
      
        .main4btn  {
            padding-top: 10px;
        }
        .mediaform {
            padding: 20px 0px;
        }
        .main5 button {
            margin: 30px auto;
        }
        .contactus0 {
            padding: 20px;
        }
        .contactus1 {
            display: none;
        }
        .contactus2 {
            display: flex;
            flex-direction: column;
        }
        .contactus a {
            padding: 4px 0 4px 16px;
        }
        .contactus3 {
            width: 400px;
        }
    
    }

</style>

<body>
    <div class="header">
        <div class="header0">
            <div class="header1">
                客服热线：010-594-78634
            </div>
            <div class="header2">
                <button type="button">登陆</button>
                <button type="button" style="color: black; background-color: white;">注册</button>
            </div>
        </div>
    </div>
    <div class="navigation">
        <div class="navigation0">
            <ul class="nav nav-pills">
                <li role="presentation" style="margin: 2rem 0 2rem 4rem;" class="active"><a href="#">首页</a></li>
                <li role="presentation" style="margin: 2rem 0 2rem 4rem;"><a href="#">在线定制</a></li>
                <li role="presentation" style="margin: 2rem 0 2rem 4rem;"><a href="#">标准箱</a></li>
                <li role="presentation" style="margin: 2rem 0 2rem 4rem;"><a href="#">品质保障</a></li>
            </ul>
        </div>  
    <!-- 媒体查询样式 -->
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">首页</a></li>
               <li><a href="#">在限定制</a></li>
               <li><a href="#">标准箱</a></li>
               <li><a href="#">品质保障</a></li>
            </ul>
        </div>
    </div>
    <div class="step">
        <div class="step0">
            <div class="step00">
                <span class="step01">1</span>
                <p style="color: #ff7f02;">1.定制纸箱</p>
            </div>
            <div class="step00">
                <span class="step02">2</span>
                <p style="color: #cccccc;">2.选择数量</p>
            </div>
            <div class="step00">
                <span class="step02">3</span>
                <p style="color: #cccccc;">3.上传附件</p>
            </div>
            <div class="step00">
                <span class="step02">4</span>
                <p style="color: #cccccc;">4.确认下单</p>
            </div>
        </div>
    <!-- 媒体查询样式 -->
        <ol  class="step1">
            <li style="color: #ff7f02;">定制纸箱</li>
            <li style="color: #cccccc;">选择数量</li>
            <li style="color: #cccccc;">上传附件</li>
            <li style="color: #cccccc;">确认下单</li>
        </ol>
    </div>
    <div class="main">
        <div class="main1">
            <span class="main001"></span>
            <span><strong>请您按照一下步骤来定制您的纸箱</strong></span>
        </div>
        <div class="main2">
            <span class="main002"></span>
            选择箱型
        </div>
        <div class="main3">
            <div class="btn-group" style="float: right;">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    &nbsp; 查看详情 &nbsp; &nbsp;
                    <span class="main003"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">111</a></li>
                  <li><a href="#">222</a></li>
                  <li><a href="#">333</a></li>
                </ul>
            </div>
            <label class="radio radio-inline">
                <input class="test-radio" type="radio" name="inlineRadioOptions1" id="inlineRadio1" value="option1">
                <span class="test-radioInput"></span>对口箱
            </label>
            <label class="radio radio-inline">
                <input class="test-radio" type="radio" name="inlineRadioOptions1" id="inlineRadio1" value="option2">
                <span class="test-radioInput"></span>飞机盒
            </label>
            <label class="radio radio-inline">
                <input class="test-radio" type="radio" name="inlineRadioOptions1" id="inlineRadio3" value="option3">
                <span class="test-radioInput"></span>天地盖
            </label>
        </div>
        <div class="main2">
            <span class="main004"></span>
            确定尺寸
        </div>
        <div class="main4">
            <div class="main4btn btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    &nbsp; 查看详情 &nbsp; &nbsp;
                    <span class="main003"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">111</a></li>
                  <li><a href="#">222</a></li>
                  <li><a href="#">333</a></li>
                </ul>
            </div>
            <form class="form-inline">
                <label class="radio radio-inline">
                    <input class="test-radio" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                    <span class="test-radioInput"></span>外径
                </label>
                <div class="form-group">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label>长</label>
                    <input type="number" class="form-control" style="width: 80px;">mm
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label>宽</label>
                    <input type="number" class="form-control" style="width: 80px;">mm
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label>高</label>
                    <input type="number" class="form-control" style="width: 80px;">mm
                </div>
                <div class="mediaform">
                    <form class="form-inline">
                        <div class="input-group" style="width: 150px;">
                            <div class="input-group-addon">长</div>
                            <input type="text" class="form-control">
                            <div class="input-group-addon">mm</div>
                        </div>
                    </form>
                    <form class="form-inline">
                        <div class="input-group" style="width: 150px;">
                            <div class="input-group-addon">宽</div>
                            <input type="text" class="form-control">
                            <div class="input-group-addon">mm</div>
                        </div>
                    </form>
                    <form class="form-inline">
                        <div class="input-group" style="width: 150px;">
                            <div class="input-group-addon">高</div>
                            <input type="text" class="form-control">
                        <div class="input-group-addon">mm</div>
                        </div>
                    </form>
                </div>
            </form>
            <form class="form-inline">
                <label class="radio radio-inline">
                    <input class="test-radio" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                    <span class="test-radioInput"></span>内径
                </label>
                <div class="form-group">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label>长</label>
                    <input type="number" class="form-control" style="width: 80px;">mm
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label>宽</label>
                    <input type="number" class="form-control" style="width: 80px;">mm
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label>高</label>
                    <input type="number" class="form-control" style="width: 80px;">mm
                </div>
                <div class="mediaform">
                    <form class="form-inline">
                    <div class="input-group" style="width: 150px;">
                        <div class="input-group-addon">长</div>
                        <input type="text" class="form-control">
                        <div class="input-group-addon">mm</div>
                      </div>
                  </form>
                  <form class="form-inline">
                    <div class="input-group" style="width: 150px;">
                        <div class="input-group-addon">宽</div>
                        <input type="text" class="form-control">
                        <div class="input-group-addon">mm</div>
                      </div>
                  </form>
                  <form class="form-inline">
                    <div class="input-group" style="width: 150px;">
                        <div class="input-group-addon">高</div>
                        <input type="text" class="form-control">
                        <div class="input-group-addon">mm</div>
                      </div>
                  </form>
                </div>

            </form>
        </div>
        <div class="main2">
            <span class="main005"></span>
            选择材质
        </div>
        <div class="main9">
            <div class="main9btn btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    &nbsp; 查看详情 &nbsp; &nbsp;
                    <span class="main003"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">111</a></li>
                  <li><a href="#">222</a></li>
                  <li><a href="#">333</a></li>
                </ul>
            </div>
            <label class="radio radio-inline">
                <input class="test-radio" type="radio" name="inlineRadioOptions2" id="inlineRadio1" value="option1">
                <span class="test-radioInput"></span>三层A瓦优质
            </label>
            <label class="radio radio-inline">
                <input class="test-radio" type="radio" name="inlineRadioOptions2" id="inlineRadio2" value="option2">
                <span class="test-radioInput"></span>三层A瓦优质
            </label>
            <label class="radio radio-inline">
                <input class="test-radio" type="radio" name="inlineRadioOptions2" id="inlineRadio3" value="option3">
                <span class="test-radioInput"></span>三层A瓦优质
            </label>
            <label class="radio radio-inline">
                <input class="test-radio" type="radio" name="inlineRadioOptions2" id="inlineRadio2" value="option2">
                <span class="test-radioInput"></span>三层A瓦优质
            </label>
            <label class="radio radio-inline">
                <input class="test-radio" type="radio" name="inlineRadioOptions2" id="inlineRadio3" value="option3">
                <span class="test-radioInput"></span>三层A瓦优质
            </label>
        </div>
        <div class="main5">
            <button type="button">下一步</button>
        </div>
    </div>
    <div class="contactus">
        <div class="contactus0">
            <div class="contactus1">
                <a href="#">51包装网——纸箱包装首选平台</a>
            </div>
            <div class="contactus2">
                <a href="#">关于我们</a>
                <a href="#">配送流程</a>
                <a href="#">联系我们</a>
                <a href="#">下单指南</a>
                <a href="#">媒体介绍</a>
            </div>
            <div class="contactus3">
                <img src="img/ewm.png" alt="二维码">
                <div style="margin-top: 8px;">
                    <p>TEL：400-0000-000</p>
                    <p>企业QQ：123456789</p>
                    <p>微信号：XXXXXXX</p>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
            北京五一包装科技有限公司Copyright ©2015&nbsp;&nbsp;&nbsp;&nbsp;51baozhuang.com015&nbsp;&nbsp;All rights reserved.&nbsp;&nbsp;京icp备99999999-1    
    </div>



    <script src="js/jquery-3.5.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>